<template>
  <div class="recharge">
    <div class="recharge-top">
      <div class="top-main">
        <div class="title">贷款余额</div>
        <div class="price">¥0.00</div>
      </div>
    </div>
    <div class="recharge-desc">请选择充值金额</div>
    <div class="price-card">
      <div
        class="card-item"
        v-for="(item, index) in priceCardList"
        :key="item.id"
        :class="currentIndex == index ? 'card-item-active' : ''"
        @click="cardClick(index)"
      >
        <div class="card-main">
          <p class="price">{{ item.price }} <span>元</span></p>
          <div class="card-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="card-bottom">
      <div class="card-bottom-main">
        <p>自定义充值金额</p>
        <div class="card-price">
          <van-field v-model="value" placeholder="¥1000" />
        </div>
      </div>
    </div>
    <div class="pay-us" @click="goEvidences">立即充值</div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="top">
            <div class="imgs" @click="backClick">
              <img src="@/assets/bt.png" alt="" />
            </div>
          </div>
          <div class="wrapper-mains">
            <div class="wrapper-left">
              <div class="imgs">
                <img src="@/assets/pay.png" alt="" />
              </div>
              <!-- <div class="user-phone">{{ userInfoDates.weixin_id }}</div> -->
              <van-field
                class="tag-read"
                v-model="userInfoDates.weixin_id"
                placeholder="¥1000"
              />
            </div>
            <div
              class="wrapper-right copy_btn"
              :data-clipboard-text="userInfoDates.weixin_id"
              @click="copyClick"
            >
              复制账号
            </div>
          </div>
          <div class="wrapper-mains wrapper-mains-two">
            <div class="wrapper-left">
              <div class="imgs">
                <!-- <img :src="userInfoDates.alipay_pic" alt="" /> -->
                <img src="@/assets/weixi.png" alt="" />
              </div>
              <!-- <div class="user-phone">{{ userInfoDates.alipay_id }}</div> -->
              <van-field
                class="tag-read"
                v-model="userInfoDates.alipay_id"
                placeholder="¥1000"
              />
            </div>
            <div
              class="wrapper-right copy-code-button"
              id="copy_zfb"
              data-clipboard-action="copy"
              data-clipboard-text="wxPhone"
              @click="copyWxClick"
            >
              复制账号
            </div>
          </div>
          <div class="wrapper-tips">
            请复制添加支付宝或微信账号充值，并上传凭证！
          </div>
          <div class="pay-us-load" @click="goLoad">上传凭证</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getPayInfos } from '@/api/pays/index'
import ClipboardJS from 'clipboard'
import clipboard from 'clipboard'
export default {
  name: 'recharge',
  data() {
    return {
      priceCardList: [
        {
          id: 1,
          price: '500',
          desc: '价值1666元',
        },
        {
          id: 2,
          price: '1000',
          desc: '价值3333元',
        },
        {
          id: 3,
          price: '10000',
          desc: '价值33333元',
        },
      ],
      currentIndex: 0,
      value: '', // 支付金额
      show: false,
      wxPhone: '17587907234',
      isLoads: false,
      userInfoDates: {},
    }
  },
  methods: {
    cardClick(index) {
      this.currentIndex = index
      let prices = this.priceCardList[this.currentIndex].price
      this.value = prices
    },
    goEvidences() {
      if (this.value == '') {
        Toast('请填写金额')
      } else {
        this.show = true
        console.log(33)
        const datass = {
          price: this.value,
        }
        console.log(datass)
        console.log(getPayInfos)
        getPayInfos(datass).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.userInfoDates = res.data
          }
        })
        // const res = await getPayInfos(datass)
        // console.log(res);
      }
    },
    backClick() {
      this.show = false
    },
    goLoad() {
      if (this.isLoads) {
        this.$router.push({
          path: '/evidence',
          query: {
            price: this.value,
          },
        })
      } else {
        Toast('请先复制号码')
      }
    },
    copyWxClick() {
      Toast('复制成功')
      console.log(23)
      this.isLoads = true
      var clipboard = new ClipboardJS('.copy-code-button') // 这里可以理解为选择器，选择上面的复制按钮
      clipboard.on('success', (e) => {
        Toast('复制成功2')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        Toast('手机权限不支持复制功能')
        // 释放内存
        clipboard.destroy()
      })
    },
    copyClick() {
      Toast('复制成功')
      this.isLoads = true
      var clipboard = new ClipboardJS('.copy_btn')
      clipboard.on('success', (e) => {
        let instance = Toast('复制成功')
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })

      clipboard.on('error', (e) => {
        // 不支持复制
        let instance = Toast('该浏览器不支持自动复制')
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })
      // console.log('123');
    },
  },
  computed: {
    valueFilter() {
      if (this.value) {
        return '¥' + this.value
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.recharge {
  font-size: 14px;
  color: #fff;
  overflow: hidden;
}
.recharge-top {
  height: 130px;
  background: url('~@/assets/recharge.png') no-repeat center;
  background-size: 350px;
  position: relative;
  .top-main {
    position: absolute;
    left: 52px;
    top: 28px;
    .price {
      font-size: 30px;
    }
  }
}
.recharge-desc {
  padding: 0 12px;
  color: #1f0d44;
  font-size: 16px;
  font-weight: 600;
}
.price-card {
  margin: 12px;
  display: flex;
  justify-content: space-between;
  .card-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 80px;
    border: 1px solid #f1f0f5;
    border-radius: 8px;
    color: #665e75;
    .price {
      font-size: 20px;
      span {
        font-size: 14px;
      }
    }
    .card-desc {
      color: #afabb7;
      font-size: 12px;
    }
  }
  .card-item-active {
    background: rgba(34, 136, 255, 0.1);
    box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
    border-radius: 8px;
    border: 1px solid #2288ff;
    color: #2288ff;
  }
}
.pay-us {
  //width: 351px;
  position: absolute;
  left: 12px;
  bottom: 44px;
  width: 351px;
  height: 40px;
  background: linear-gradient(135deg, #2389ff 0%, #1852f9 100%);
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}
.pay-us-load {
  //width: 351px;
  width: 100%;
  height: 32px;
  background: #1677ff;
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 16px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  margin-top: 30px;
}
.card-bottom {
  margin: 0 12px;
  height: 107px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 8px;
  border: 1px solid #f1f0f5;
  color: #1f0d44;
  padding: 16px 20px;
  font-weight: 600;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .wrapper-mains {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;
  }
  .wrapper-mains-two {
    margin-top: 10px;
  }
  img {
    width: 24px;
    height: 24px;
  }
  .wrapper-left {
    width: 172px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #333;
    border-bottom: 1px solid #f7f6fb;
    img {
      display: block;
      width: 24px;
      height: 24px;
    }
  }
  .wrapper-right {
    width: 76px;
    height: 32px;
    margin-top: 35px;
    border-radius: 16px;
    opacity: 0.5;
    border: 1px solid #1677ff;
    color: #1677ff;
    text-align: center;
    line-height: 32px;
  }
}

.block {
  width: 300px;
  height: 344px;
  background: #ffffff;
  border-radius: 8px;
  padding: 0 20px;
  overflow: hidden;
  .top {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .imgs {
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .wrapper-tips {
    color: #e02020;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 10px;
  }
}
::v-deep .card-price .van-cell {
  margin-top: 13px;
  padding: 0;
  border-bottom: 1px solid #f7f6fb;
}
::v-deep .van-cell__value {
  height: 30px;
}
::v-deep .card-price .van-field__control {
  color: #2288ff;
}
::v-deep .wrapper-mains .van-cell {
  padding-left: 0;
}
.top-main {
}
</style>